<%--
  Created by IntelliJ IDEA.
  User: zhangzhengwei2006
  Date: 2024/1/4/0004
  Time: 13:57
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>用户举报</title>
</head>
<script src="<%=request.getContextPath() %>/static/jq/jquery-3.3.1.min.js"></script>
<style>
    * {
        margin: 0;
        border: 0;
        padding: 0;
    }

    .article {
        width: 100vw;
        height: 100vh;
        display: flex;
        flex-direction: column;
        background-color: white;
        justify-content: space-between;

    }

    .article > .controls {
        width: 100vw;
        height: 90px;
        display: flex;
    }

    .article > .article-content {
        width: 100vw;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        height: calc(100vh - 200px);
        flex-direction: column-reverse;
    }

    .article > .controls > .search {
        width: 100%;
        background-color: red;
    }

    .article > .paging {
        width: 100vw;
        height: 100px;
        display: flex;
        justify-content: flex-end;
    }

    .article-content > table {
        width: 90%;
        text-align: center;
        border-collapse: collapse;
        /*border: 1px solid #959595;*/
    }

    tr {
        height: 45px;
        border-bottom: 1px solid #959595;
    }

    .tdh:hover, .cancel:hover, .homeBut:hover, .pagesbut > button:hover, .pages > button:hover, .weiyeBut:hover {
        color: #21a2ff;
        cursor: pointer;
    }

    #xianghsi {
        top: 50px;
        width: 50%;
        height: 50%;
        display: none;
        padding: 15px;
        z-index: 9999;
        position: absolute;
        background-color: #FFFFFF;
    }

    .cancel {
        top: 0;
        right: 6px;
        width: 30px;
        height: 30px;
        z-index: 99999;
        position: absolute;
    }

    .cancel > img {
        width: 30px;
        height: 30px;
    }

    #xianghsi > span {
        height: 100%;
        display: block;
        overflow: scroll;
        margin-top: 10px;
    }

    #xianghsi > span::-webkit-scrollbar {
        width: 4px;
    }

    #xianghsi > span::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: rgba(0, 0, 0, 0.2);
    }

    .paging-page {
        width: 50%;
        height: 50px;
        display: flex;
        align-items: center;
    }

    .paging-page > div {
        height: 40px;
        display: flex;
        margin-left: 10px;
        align-items: center;
    }

    .paging-page > .homeBut-div > button, .paging-page > .weiye > button {
        font-size: 20px;
        font-weight: 300;
        background-color: transparent;
    }

    .paging-page > .select-div > select {
        width: 70px;
        height: 30px;
    }

    .paging-page > .pages > button {
        background-color: transparent;
    }

    .paging-page > .pages > button > img {
        width: 20px;
        height: 20px;
    }

    .paging-page > .pages > .pagesbut {
        height: 30px;
        display: flex;
        margin: 0 5px 0 5px;
        justify-content: space-around;
    }

    .paging-page > .pages > .pagesbut > button {
        width: 20px;
        height: 30px;
        color: #b3b3b3;
        font-size: 20px;
    }

    select:focus {
        outline: none;
    }

    #jingzhibut:hover {
        cursor: not-allowed;
    }

    #status {
        top: 10px;
        width: 50%;
        height: 50%;
        display: none;
        padding: 15px;
        z-index: 9999;
        position: absolute;
        background-color: #FFFFFF;
    }

    .caozuo:hover {
        cursor: pointer;
    }

    .caozuo {
        color: #ffffff;
        width: 70px;
        height: 30px;
        border-radius: 5px;
        background-color: cornflowerblue;
    }

    .updateContent {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .updateContent > div {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-top: 10px;
    }

    .updateContent > div > div > label {
        margin-right: 10px;
        /*width: auto;*/
        /*border: 1px solid #959595;*/
    }

    .inputs > input {
        margin-right: 4px;
    }

    .u-title {
        display: block;
        width: 200px;
        height: 150px;
        overflow: scroll;
        /*margin-right: 22%;*/
    }

    .u-title::-webkit-scrollbar {
        padding: 0;
        width: 4px;
    }

    .u-title::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: rgba(0, 0, 0, 0.2);
    }

    .u-content {
        display: block;
        width: 300px;
        height: 150px;
        overflow: scroll;
        /*margin-right: 22%;*/
    }

    .u-content::-webkit-scrollbar {
        padding: 0;
        width: 4px;
    }

    .u-content::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: rgba(0, 0, 0, 0.2);
    }

    .chaozhuo {
        right: 0;
        bottom: 0;
        position: absolute;
    }

    .chaozhuo > button {
        width: 40px;
        height: 25px;
        color: #ffffff;
        margin-right: 5px;
        border-radius: 5px;
        background-color: #098dee;
    }

    .chaozhuo > button:hover {
        cursor: pointer;
    }
</style>
<body>
<div class="article">
    <%--    <div class="controls">--%>
    <%--        <div class="search"></div>--%>
    <%--    </div>--%>
    <div class="article-content">
        <table>
            <thead>
            <tr>
                <th>编号</th>
                <th>被举报人</th>
                <th>举报人</th>
                <th>举报理由</th>
                <th>处理状态</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
        <div id="status">
            <div class="cancel">
                <img src="<%=request.getContextPath()%>/img/x叉.png" alt="">
            </div>
            <h1>
                修改状态
            </h1>
            <div class="updateContent">
                <div>
                    <div style="margin-left: 30px"><label>用户id:</label><span></span></div>
                    <div style="margin-right: 175px"><label>用户名:</label><span></span></div>
                </div>
                <div>
                    <div style="margin-left: 30px"><label>举报人:</label><span></span></div>
                    <div style="margin-right: 175px"><label>举报内容:</label><span></span></div>
                </div>
                <div class="inputs">
                    <div style="margin-left: 30px">
                        <label>处理方式:</label>
                        <input type="radio" name="status" value="0"><span>禁言</span>
                        <input type="radio" name="status" value="1"><span>临时封号</span><%-- 审核通过 --%>
                        <input type="radio" name="status" value="2"><span>永久封号</span><%-- 作废 --%>
                    </div>
                </div>
                <div id="date-div" style="margin-right: 30px;display: none">
                    <div><label>当前时间:</label><span id="datetime"></span></div>
                    <div><label>选择解封时间:</label><input id="dispose-deate" type="datetime-local" name="disposeDate" value=""></div>
                    <span id="date-div-dpan"></span>
                </div>
            </div>
            <div class="chaozhuo">
                <button onclick="cancel(this)">取消</button>
                <button id="save-but" onclick="save(this)">确定</button>
            </div>
        </div>
        <div id="xianghsi">
            <div class="cancel">
                <img src="<%=request.getContextPath()%>/img/x叉.png" alt="">
            </div>
            <span></span>
        </div>
    </div>
    <%--        分页--%>
    <div class="paging">
        <div class="paging-page">
            <div class="homeBut-div">
                <button class="homeBut">首页</button>
            </div>
            <div class="select-div">
                <select>
                    <option value="4">每页4条</option>
                    <option value="5">每页5条</option>
                    <option value="10">每页10条</option>
                    <option value="15">每页15条</option>
                    <option value="20">每页20条</option>
                    <option value="15">每页25条</option>
                </select>
            </div>
            <div class="pages">
                <button id="left-but"><img src="<%=request.getContextPath()%>/img/分页-翻页左.png" alt=""></button>
                <div class="pagesbut"></div>
                <button id="right-but"><img src="<%=request.getContextPath()%>/img/分页-翻页右.png" alt=""></button>
            </div>
            <div class="weiye">
                <button class="weiyeBut">尾页</button>
            </div>
            <div class="total">
                一共
                <span></span>
                页
            </div>
        </div>
    </div>
</div>
<script>
    let datas = [];
    let currentPage = 1;// 当前页
    let pageSize = 4;//每页显示条数
    let data = {
        "currentPage": currentPage,
        "pageSize": pageSize
    }
    let e2 = 1;
    let total;
    // 加载
    $(function () {
        init(data);
        /*$("#left-but").css("cursor", "not-allowed");
        $("#left-but").off("click");*/
    })

    // 初始化数据
    function init(data) {
        let tbody = $(".article-content>table>tbody");
        let pagesbut = $(".pagesbut");
        // 初始化数据
        $.ajax({
            async: true,
            url: '<%=request.getContextPath() %>/back/report?ac=getArticlelnUser',
            type: 'get',
            data: data,
            dataType: "json",
            success: function (pagedata) {
                $(".total>span").text(pagedata.totalPages);//总过页数
                total = pagedata.totalPages;
                if (pagedata.totalPages > 10) {

                } else {
                    for (let i = 1; i < pagedata.totalPages + 1; i++) {
                        pagesbut.css("width", 22 * i + 'px')
                        if (e2 == i) {
                            pagesbut.append(`
                                    <button style="background-color:#6db4f9;color:#FFF;" onclick="currentPageBut(this)">${i}</button>
                                `);
                        } else {
                            pagesbut.append(`
                            <button style="background-color:;" onclick="currentPageBut(this)">${i}</button>
                        `);
                        }
                    }
                }
                let data = pagedata.data;
                // 数据
                for (let i = 0; i < data.length; i++) {
                    datas.push(data[i])
                    let status;
                    let reason;

                    if (data[i].report_reason.length > 10) {
                        reason = data[i].report_reason.substring(0, 10) + "...";
                    } else {
                        reason = data[i].report_reason
                    }
                    if (data[i].restate == "0") {
                        status = "未处理";
                    }
                    /*else if (data[i].restate == "1") {
                        status = "已处理";
                        caoz = "查看";
                    }*/

                    tbody.append(`<tr>
                        <td><span style="display: none;">${data[i].id}</span>${i+1}</td>
                        <td>${data[i].user_name}</td>
                        <td>${data[i].informer}</td>
                        <td class="tdh" onclick="butre(this)">${reason}</td>
                        <td>${status}</td>
                        <td class="tdh">
                            <button class="caozuo" onclick="statusDatk(this)">去处理</button>
                        </td>
                    </tr>`);
                }
            }
        })
    }


    // 获取单选按钮的val
    let id;
    let uid;
    let statu;
    let datetime;
    let datetime2;
    $("#status>.updateContent>.inputs>div>input").change(function () {
        if ($(this).val() == "0" || $(this).val() == "1") {
            let currentDate = new Date();
            $("#datetime").html(currentDate.toLocaleString('zh-CN', {
                hour12: false,
                dateStyle: 'medium',
                timeStyle: 'short'
            }))

            $("#date-div").css("display", "block");
            // $("#dispose-deate").val("2024-01-15T11:17");
            let month = currentDate.getMonth() + 1;// 月数加1
            let datec;
            if($(this).val() == "0"){
                datec = currentDate.getFullYear() + "-" + (month < 10 ? ('0' + month) : month) + "-" + (currentDate.getDate() + 1) + "T" + currentDate.toLocaleString('zh-CN', {
                    hour12: false,
                    timeStyle: 'short'
                })
                $("#date-div-dpan").text("默认1天");
            }else if ($(this).val() == "1"){
                datec = currentDate.getFullYear() + "-" + (month < 10 ? ('0' + month) : month) + "-" + (currentDate.getDate() + 7) + "T" + currentDate.toLocaleString('zh-CN', {
                    hour12: false,
                    timeStyle: 'short'
                })
                $("#date-div-dpan").text("默认7天");
            }

            /*let datec = currentDate.getFullYear() + "-" + (month < 10 ? ('0' + month) : month) + "-" + (currentDate.getDate() + 7) + "T" + currentDate.toLocaleString('zh-CN', {
                hour12: false,
                timeStyle: 'short'
            })*/


            $("#dispose-deate").val(datec.toString());
            datetime = currentDate.getFullYear() + "-" + (month < 10 ? ('0' + month) : month) + "-" + currentDate.getDate() + " " + currentDate.toLocaleString('zh-CN', {
                hour12: false,
                timeStyle: 'short'
            });
            datetime2 = datec.toString();
            // console.log(datec)
            //(currentDate.toLocaleString('zh-CN', {hour12: false,timeStyle:'short'})+'').replace(' ', 'T')
        } else {
            $("#date-div").css("display", "none");
        }
        statu = $(this).val();
    })

    // 获取选择的时间
    $("#dispose-deate").blur(function () {
        datetime2 = $(this).val();
    })

    // 打开弹窗
    function statusDatk(d) {
        let spans = $(".updateContent>div>div>span");
        let rid = $(d).parent().parent().children().find("span").text();
        datas.forEach(e => {
            if (e.id == rid) {
                id = e.id;
                uid = e.uid;
                $(spans[0]).text(e.uid);
                $(spans[1]).text(e.user_name);
                $(spans[2]).text(e.informer);
                $(spans[3]).text(e.report_reason);
            }
        })
        $("#status").css("display", "block");
    }

    // 保存数据
    function save() {
        $.ajax({
            async: true,
            url: '<%=request.getContextPath() %>/back/report?ac=updateArticlelnUser',
            type: 'post',
            data: {
                "rid": id,
                "uid": uid,
                "disposeType": statu,
                "disposeDate": datetime2,
                "creationTime": datetime
            },
            dataType: "json",
            success: function (r) {
                alert(r.message)
                if (r.message == "操作成功") {
                    $(".article-content>table>tbody").html("");
                    $(".pagesbut").html("");
                    init(data);
                    $("#date-div").css("display", "none");
                    $("#status").css("display", "none");
                }
            }
        })
    }

    function cancel(c) {
        let spans = $(".updateContent>div>div>span");
        $(spans[0]).text("");
        $(spans[1]).text("");
        $(spans[2]).text("");
        $(spans[3]).text("");
        // $(spans[4]).text("");
        // $(spans[5]).text("");
        let inputRadio = $(".inputs>div>input[type='radio']");
        for (let i = 0; i < inputRadio.length; i++) {
            if (inputRadio[i].checked == true) {
                inputRadio[i].checked = false;
            }
        }
        $("#date-div").css("display", "none");
        $("#status").css("display", "none");
    }

    // 尾页
    $(".weiyeBut").click(function () {
        $(".article-content>table>tbody").html("");
        $(".pagesbut").html("");
        e2 = total;
        data.currentPage = total;
        init(data);
    })

    // 首页
    $(".homeBut").click(function () {
        $(".article-content>table>tbody").html("");
        $(".pagesbut").html("");
        e2 = 1;
        data.currentPage = e2;
        init(data);
    })

    // 选择显示条数
    $(".select-div>select").change(function () {
        $(".article-content>table>tbody").html("");
        $(".pagesbut").html("");
        data.pageSize = $(this).val()
        e2 = 1;
        data.currentPage = e2;
        init(data);
    })

    // 上一页
    $("#left-but").click(function () {
        $(".article-content>table>tbody").html("");
        $(".pagesbut").html("");
        if (e2 != 1) {
            data.currentPage = e2 - 1;
        } else {
            data.currentPage = e2
        }
        e2 = data.currentPage;
        init(data);
    });

    // 下一页
    $("#right-but").click(function () {
        $(".article-content>table>tbody").html("");
        $(".pagesbut").html("");
        if (e2 != total) {
            data.currentPage = e2 + 1;
        } else {
            data.currentPage = e2
        }
        e2 = data.currentPage;
        init(data);
    });

    // 页码选项
    function currentPageBut(e) {
        $(".article-content>table>tbody").html("");
        $(".pagesbut").html("");
        data.currentPage = Number(e.innerText);
        e2 = data.currentPage;
        init(data);
        // e.css("background-color","red");
    }

    // 打开举报内容
    function butre(data) {
        datas.forEach(e => {
            if (e.report_reason.substring(0, 10) == data.innerText.substring(0, 10)) {
                $("#xianghsi").css("display", "block")
                $("#xianghsi>span").text(e.report_reason);
                return;
            }
            $("#xianghsi").css("display", "none")
            // $("#xianghsi>span").text(e.report_reason);

        })

    }

    // 打开标题详情
    function butt(data) {
        datas.forEach(e => {
            if (e.title.substring(0, 10) == data.innerText.substring(0, 10)) {
                $("#xianghsi").css("display", "block")
                $("#xianghsi>span").text(e.title);
            }
        })

    }

    // 查看内容详情
    function butc(data) {
        datas.forEach(e => {
            if (e.card_content.substring(0, 10) == data.innerText.substring(0, 10)) {
                $("#xianghsi").css("display", "block")
                $("#xianghsi>span").text(e.card_content);
            }
        })

    }

    // 关闭查看
    $(".cancel").click(function () {
        $("#xianghsi").css("display", "none")
        $("#xianghsi>span").text("");
        $("#status").css("display", "none")
        cancel();
    })

</script>
</body>
</html>
